<template>
    <admin-view>
        <admin-section>

            <admin-card>
                <div>
                    <el-radio-group
                            v-model="status"
                            size="small"
                            style="float: right"
                            @change="onStatusChange">
                        <el-radio-button label="全部" ></el-radio-button>
                        <el-radio-button label="待审核" ></el-radio-button>
                    </el-radio-group>
                </div>
                <div>
                    <el-table
                            :data="clubs.items"
                    >
                        <el-table-column
                                label="站子"
                                prop="club_name"
                        >
                            <template slot-scope="club">
                                <el-button
                                        type="text"
                                        size="mini"
                                        @click="toClub(club.row.club_id)">{{club.row.club_name}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="名称"
                            prop="name"
                        >
                            <template slot-scope="club">
                                <el-button
                                        type="text"
                                        size="mini"
                                        @click="toUser(club.row.uid)">{{club.row.name}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="真实姓名"
                            prop="real_name"
                        ></el-table-column>
                        <el-table-column
                            label="提现金额"
                            prop="amount"
                        >
                            <template slot-scope="club">
                                {{club.row.amount | Money}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="手续费"
                                prop="fee"
                        >
                            <template slot-scope="club">
                                {{club.row.fee | Money}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="支付宝账号"
                                prop="account"
                        ></el-table-column>
                        <el-table-column
                                label="流水号"
                                prop="withdraw_id"
                                width="220"
                                class="no"
                        >
                            <template slot-scope="club">
                                <span class="no">{{club.row.withdraw_id}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="支付宝流水号"
                                prop=""
                                width="250"
                        >
                            <template slot-scope="club">
                                <span class="no">{{club.row.trade_no}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="打款金额"
                                prop="amount"
                        >
                            <template slot-scope="club">
                                {{club.row.withdraw_amount | Money}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="打款手续费"
                                prop="fee"
                        >
                            <template slot-scope="club">
                                {{club.row.withdraw_fee | Money}}
                            </template>
                        </el-table-column>

                        <el-table-column
                            prop="status"
                            label="状态"
                        >
                            <template slot-scope="club" >
                                <span
                                        :class="{
                                        'status':true,
                                'wait':club.row.status === 0,
                                'hold':club.row.status === 1,
                                'not-enough':club.row.status === 2,
                                'success':club.row.status === 3,
                                'fail':club.row.status === 4,

                            }"
                                >{{applyStatus[club.row.status]}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                        label="提交时间"
                        width="180"
                        prop="create_time">
                            <template slot-scope="club">
                                {{club.row.create_time | TimeFormat }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                        >
                            <template slot-scope="club">
                                <el-button
                                        :disabled="club.row.status !== 1"
                                        type="text"
                                        size="mini"
                                        @click="onApply(club.row.withdraw_id)">审核</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div style="float: right" class="foot">
                    <el-pagination
                            background
                            layout="total, prev, pager, next, jumper"
                            :page-size="10"
                            :total="clubs.count"
                            @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </admin-card>
        </admin-section>
    </admin-view>
</template>

<script lang="ts">

    import {AdminView,AdminCard,AdminLabel,AdminSection} from '@/views/layout'
    import {Vue,Component} from 'vue-property-decorator'
    import {Api} from '@/api/capital'
    import Filter from '@/libs/filter'

    @Component({
        name:"AdminWithdrawApplyList",
        components: {
            AdminView,
            AdminCard,
            AdminSection
        },
        filters: Filter
    })

    /*
    enum ClubWithdrawStatus {

    //提款单以提交，等待从粉丝站账户扣款
    WITHDRAW_WAIT = 0;  //待审核
    //提款单扣款成功
    WITHDRAW_WITHHOLD = 1; //待审核

    //提款单扣款时发现没足够余额（例如发起提款，然后同时有个自动退款同时发生）
    WITHDRAW_NOT_ENOUGH_MONEY = 2; //要怎么处理？

    //提款成功
    WITHDRAW_SUCCESS = 3; //提款成功

    //提款失败
    WITHDRAW_REFUSE = 4; //提款失败
}
     */
    export default class AdminWithdrawApplyList extends Vue {

        status:any = "待审核";
        applyStatus = [
            "待扣款",
            "待打款",
            "账户余额不足",
            "已打款",
            "已拒绝",
        ];

        clubs:Api.Capital.GetWithdrawApplyListResponse = {
            items :[],
            count:0,
            index:0,
        };

        page:number = 0;

        handleCurrentChange(page:number) {

            page = page -1;

            console.log(page,this.clubs.count)
            if(page * 10 < this.clubs.count) {
                this.page = page;
                this.loadView()
            }
        }

        toUser(uid:any) {
            this.$router.push({
                path:`/user/${uid}`
            })
        }

        toClub(club_id:any) {
            this.$router.push({
                path:`/stars/club/editor/${club_id}`
            })
        }

        loadView() {

            Api.Capital.GetWithdrawApplyList({
                index:this.page*10,
                all:this.status === "全部"
            }).then((ack) => {
                console.log(ack);
                this.clubs = ack
            })
        }

        onStatusChange() {
            this.page = 0
            this.loadView()
        }

        mounted() {
            this.loadView()
        }

        onApply(id:any) {
            this.$router.push({
                path:`/apply/withdraw/view/${id}`
            })
        }
    }


</script>

<style lang="scss" scoped>

    .wait {
        color: purple;
    }

    .hold {
        color: #E6A23C;
    }

    .not-enough {
        color: #909399;
    }

    .success {
        color: #67C23A;
    }

    .fail {
        color: #F56C6C;
    }

    .status {
        font-size: 14px;
    }

    .no {
        font-family: "Courier New";
        font-size: 10px;
    }

    .foot {
        padding-top: 10px;
    }
</style>